import store from './store'

/**
 * 精灵基类
 */
export default class Sprite {
  /** canvas2d上下文 */
  protected readonly ctx = store.ctx

  /**
   * 精灵类构造函数
   * @param image image对象
   * @param sx 资源剪裁x坐标（左上角）
   * @param sy 资源剪裁y坐标（左上角）
   * @param sw 资源剪裁宽度
   * @param sh 资源剪裁高度
   * @param x 资源在canvas的x坐标（左上角）
   * @param y 资源在canvas的y坐标（左上角）
   * @param w 资源在canvas的宽度
   * @param h 资源在canvas的高度
   */
  constructor(
    public image?: CanvasImageSource,
    public sx?: number,
    public sy?: number,
    public sw?: number,
    public sh?: number,
    public x?: number,
    public y?: number,
    public w?: number,
    public h?: number
  ) {}

  /**
   * 获取指定资源
   * @param key 资源key
   * @returns 指定资源
   */
  protected static getMap(key: string) {
    return store.map.get(key) as HTMLImageElement
  }

  /**
   * 获取指定资源的json配置
   * @param key 资源key
   * @returns json配置
   */
  protected static getSpritesData(key: string) {
    const spritesData = store.map.get('spritesData') as {
      [key: string]: {
        sx: number
        sy: number
        sw: number
        sh: number
      }
    }
    return spritesData[key] ?? null
  }

  /**
   * 绘制函数
   * @param params 绘制参数
   * @returns 无
   */
  public draw(params?: {
    image?: CanvasImageSource
    sx?: number
    sy?: number
    sw?: number
    sh?: number
    x?: number
    y?: number
    w?: number
    h?: number
  }): void {
    this.ctx.drawImage(
      params?.image ?? this.image,
      params?.sx ?? this.sx,
      params?.sy ?? this.sy,
      params?.sw ?? this.sw,
      params?.sh ?? this.sh,
      params?.x ?? this.x,
      params?.y ?? this.y,
      params?.w ?? this.w,
      params?.h ?? this.h
    )
  }
}
